
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>影视剧留言板</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script src="/lib/axios.js"></script>
    <script src="/lib/jquery.js"></script>
  </head>

  <body>
    <div class="comments">
      <!-- 评论内容 -->
      <h3 class="comm-head">评论</h3>
      <div class="comm-input">
        <textarea
          placeholder="爱发评论的人，运气都很棒"
          maxlength="100"
        ></textarea>
        <div class="foot">
          <div class="word">0/100</div>
          <div class="btn">发表评论</div>
        </div>
      </div>
      <!-- 头部 -->
      <h3 class="comm-head">热门评论<sub>(5)</sub>
        <span class="filter active" data-order="id" data-sx="asc">默认</span>
        <span class="filter" data-order="time" data-sx="asc">时间</span>
      </h3>
      <!-- 评论列表 -->
      <ul class="comm-list">
        <li class="comm-item">
          <div
            class="avatar"
            style="
              background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');
            "
          ></div>
          <div class="info">
            <p class="name vip">
              清风徐来
              <img
                alt=""
                src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png"
              />
            </p>
            <p class="time">
              <span>2012-12-12</span>
              <span class="iconfont icon-collect"></span>
              <span class="iconfont icon-collect-sel"></span>
              <span class="del">删除</span>
            </p>
            <p>
              这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
            </p>
          </div>
        </li>
        <li class="comm-item">
          <div class="avatar"></div>
          <div class="info">
            <p class="name">清风徐来</p>
            <p class="time">
              <span>2012-12-12</span>
              <span class="iconfont icon-collect-sel"></span>
            </p>
            <p>
              这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
            </p>
          </div>
        </li>
      </ul>
    </div>

    <script src="./js/api.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
